<template>
<div class="iBox">
  <div id="home">
    <!--首页轮播图-->
    <div class="carousel">
      <el-carousel height="500px" interval="4000" pause-on-hover>
        <el-carousel-item>
          <img
              src="https://rs.dance365.com/photo/1667210329871.jpg?imageView2/0/w/2000/h/1200/format/webp/ignore-error/1"
              alt="图1">
        </el-carousel-item>
        <el-carousel-item>
          <img
              src="https://rs.dance365.com/photo/1667373574669.jpg?imageView2/0/w/2000/h/1200/format/webp/ignore-error/1"
              alt="图1">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--选择标签-->
    <div class="label-left">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="推荐 " name="Recommend">
          <!--  视频列表-->
          <VideoList :recommendList="recommendList"/>
        </el-tab-pane>
        <el-tab-pane label="作品" name="Works">
          <div class="ts">
            <div class="topList">
              <div class="listItem"
                   :class="item.isChecked? 'listActive':''"
                   v-for="item in topList"
                   :key="item.id"
                   @click="getListSource(item)"
              >{{item.name}}</div>
            </div>
            <div class="filter" @click="toggleIcon">筛选<sapn :style="{display:!filterIcon? 'none':'inline-block'}"><el-icon><Filter /></el-icon></sapn></div>
            <selectionContent @getVideo="getVideo" :style="{display:filterIcon? 'none':'block'}"/>
          </div>
          <!--  视频列表-->
          <VideoList :recommendList="recommendList"/>
        </el-tab-pane>
        <el-tab-pane label="专题" name="Topic">
          <div class="ts">
            <div class="topList">
              <div class="listItem"
                   :class="item.isChecked? 'listActive':''"
                   v-for="item in topList"
                   :key="item.id"
                   @click="getListSource(item)"
              >{{item.name}}</div>
            </div>
            <div class="filter" @click="toggleIcon">筛选<sapn :style="{display:!filterIcon? 'none':'inline-block'}"><el-icon><Filter /></el-icon></sapn></div>
            <selectionContent @getVideo="getVideo" :style="{display:filterIcon? 'none':'block'}"/>
          </div>
          <!--  视频列表-->
          <VideoList :recommendList="recommendList"/>
        </el-tab-pane>
        <el-tab-pane label="动态" name="Trends">
          <!--  视频列表-->
          <VideoList :recommendList="recommendList"/>
        </el-tab-pane>
        <el-tab-pane label="关注" name="Focus">
          <!--  视频列表-->
          <VideoList :recommendList="recommendList"/>
        </el-tab-pane>
      </el-tabs>
      <div class="label-right">
        <span @click="selectHobby"><el-button text><el-icon><Menu /></el-icon> 选择兴趣技能</el-button></span>
      </div>
    </div>
  </div>


  <!--加载更多视频-->
  <div class="loading" >
    <el-button @click="uploadRecommendList"  v-loading.fullscreen.lock="fullscreenLoading" v-show="isLoading">加载更多</el-button>
  </div>
  <!--兴趣技能框-->
  <el-dialog
      v-model="outerVisible"
      style="text-align: left"
      width="60%"
  >
    <template #header>
      <div>
        <h3>选择我的兴趣技能 {{selectedLen}} / 7</h3>
        <sapn style="color: #ccc;">例如舞蹈就选舞种</sapn>
      </div>
    </template>
    <!--    搜索-->
    <div style="margin-top: -10px">
      <el-input
          v-model="inputVal"
          @input="throttleSearch"
          @keyup.enter="searchKeys"
          placeholder="搜索兴趣技能"
          :prefix-icon="Search"
          style="width: 300px;margin-right: 20px;"
      />
      <el-button
          :disabled="inputVal.trim()===''? true:false"
          @click="searchKeys"
      >搜索</el-button>
    </div>
    <!--  已选模块  -->
    <div class="hasSelected">
      <el-tag
          type="info"
          effect="plain"
          :closable="true"
          @close="closeTag(item)"
          v-for="item in selectedTags"
          :key="item.id"
      >
        <span style="color: black">{{item.name}}</span>
      </el-tag>
    </div>
    <h3>推荐兴趣技能</h3>
    <div class="hasSelected">
      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <el-tag
            :type="item.isChecked?'success':'info'"
            effect="plain"
            v-for="item in hobbyList"
            :key="item.id"
            style="cursor:pointer;"
            @click="toggleColor(item)"
        >
          <div class="tag_info">{{item.name}}</div>
        </el-tag>
      </ul>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="closeDialog">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  搜索结果弹出框-->
  <el-dialog
      v-model="searchDialogVisible"
      style="text-align: left"
      width="70%"
  >
    <template #header>
      <div>
        <sapn style="cursor:pointer;" @click="back"><el-icon style="font-size: 12px"><ArrowLeftBold /></el-icon><span>返回</span></sapn>
      </div>
    </template>
    <!--    搜索-->
    <div style="margin-top: -10px">
      <el-input
          v-model="inputVal"
          @input="throttleSearch"
          @keyup.enter="throttleSearch"
          placeholder="搜索兴趣技能"
          :prefix-icon="Search"
          style="width: 300px;margin-right: 20px;"
      />
      <el-button
          :disabled="inputVal.trim()===''? true:false"
          @click="throttleSearch"
      >搜索</el-button>
    </div>
    <!--      历史记录-->
    <div class="searchHis">
      <sapn style="margin-right:20px">历史搜索</sapn><el-icon style="cursor: pointer" @click="clearHis"><DeleteFilled/></el-icon>
    </div>
    <div class="hasSelected">
      <el-tag
          type="info"
          effect="plain"
          v-for="item in searchHistory"
          :key="item"
          style="cursor:pointer;"
          @click="addHobby(item)"
      >
        <div class="tag_info">{{item}}</div>
      </el-tag>
    </div>
    <!--      搜索结果-->
    <p style="color: #ccc">搜索结果</p>

    <ul class="infinite-list" style="overflow: auto;height: 200px">
      <div class="danceRes">
        <div class="container"
             v-for="item in searchByNameRes"
             :key="item.id"
             v-if="searchByNameRes.length!==0"
             @click="addHobby(inputVal || item.name)"
        >
          <div class="outer">
            <div class="icon"><el-icon class="fs"><Connection /></el-icon></div>
            <div class="content">
              <h4>{{item.name}}</h4>
              <p>{{item.description}}</p>
            </div>
            <div class="afterIcon"><el-icon class="fs"><Plus /></el-icon></div>
          </div>
        </div>
        <div class="container" @click="addHobby(searchHistory[0]||inputVal)" v-else>
          <div class="outer">
            <div class="icon"><el-icon class="fs"><Connection /></el-icon></div>
            <div class="content">
              <h4>{{searchHistory[0] || inputVal}}</h4>
              <p>0条内容，468人搜索</p>
            </div>
            <div class="afterIcon"><el-icon class="fs"><Plus /></el-icon></div>
          </div>
        </div>
      </div>
    </ul>
  </el-dialog>
</div>
</template>

<script lang="ts">
export default {
  name: 'Home',
}
</script>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import {
  reqHotList,
  reqTotalList,
  reqSearchByName,
  reqMyHobby,
  reqRecommend,
  type TypeHobbyList,
  type hobbyItem,
  reqNewList,
  type TypeSearchConItem
} from "@/apis/source";
import {ref, onMounted, computed} from "vue";
import {debounce} from 'lodash'
import {ElMessage} from "element-plus";
import type { TabsPaneContext } from 'element-plus'
import {useSource} from "@/stores/source";
import {storeToRefs} from "pinia";
import selectionContent from "@/components/ selectionContent/index.vue"
const sourceInfo = useSource()
const {searchHistory,isEleLoading} = storeToRefs(sourceInfo)
//初始化挂载时调用
onMounted(()=>{
  getRecommendList()
  myHobbyList()
})
//筛选
const filterIcon= ref<boolean>(true)
//榜单
const topList = ref<any>([
  {name:'综合榜',id:'001',isChecked:true},
  {name:'热练榜',id:'002',isChecked:false},
  {name:'新锐榜',id:'003',isChecked:false},
  {name:'最新',id:'004',isChecked:false}
])
// 登录框关闭状态
const outerVisible = ref<boolean>(false)
//搜索结果框状态
const searchDialogVisible = ref<boolean>(false)
//推荐列表pageSize
const pageSize = ref<number>(10)
//推荐列表pageNum
const pageNum = ref<number>(0)
//推荐列表
const recommendList = ref<any>(null)
// loading页面的加载隐藏
const fullscreenLoading = ref<boolean>(false)
// 按钮的隐藏
const isLoading = ref<boolean>(true)
//我的兴趣列表pageSize
const hobby_pageSize = ref<number>(32)
//我的兴趣列表pageNum
const hobby_pageNum = ref<number>(0)
//榜单pageSize
const list_pageSize = ref<number>(10)
//榜单pageNum
const list_pageNum = ref<number>(0)
//我的兴趣列表
const hobbyList = ref<TypeHobbyList>([])
//搜索框的值
const inputVal = ref<string>('')
//当前激活组件
const activeName = ref('Recommend')
//保存已选中标签的长度
const selectedLen = ref<number>(0)
//子传父接收值
const getVideo = (videoList:any)=>{
  recommendList.value = videoList
}
//点击panel切换
const handleClick = async (tab: TabsPaneContext) => {
  switch (tab.props.name) {
    case 'Recommend':
      pageSize.value = 10
      pageNum.value = 0
      isEnough.value = 0
      await getRecommendList()
      return
    case 'Works':
      list_pageSize.value = 10
      list_pageNum.value = 1
      isAddEnough.value = 0
      const res = await reqTotalList(list_pageSize.value,list_pageNum.value)
      recommendList.value = res.content
      return;
    case 'Topic':
      list_pageSize.value = 10
      list_pageNum.value = 1
      isAddEnough.value = 0
      const re = await reqNewList(list_pageSize.value,list_pageNum.value+1)
      recommendList.value = re.content
      return;
    case 'Trends':
      pageSize.value = 10
      pageNum.value = 1
      isEnough.value = 0
      await getRecommendList()
      return;
    case 'Focus':
      pageSize.value = 10
      pageNum.value = 2
      isEnough.value = 0
      await getRecommendList()
      return;
  }
}
//点击切换过滤图标
const toggleIcon = ()=>{
  filterIcon.value = !filterIcon.value
}
//搜索结果
const searchByNameRes = ref<TypeSearchConItem[]>([])
//点击切换tab颜色
const   getListSource = async (topItem:any)=>{
  topList.value.forEach((item:any)=>item.isChecked=false)
  topItem.isChecked = true
  if(topItem.name === '综合榜'){
    const res = await reqTotalList(list_pageSize.value,list_pageNum.value)
    recommendList.value = res.content
  }else if(topItem.name === '热练榜'){
    const res = await reqHotList(list_pageSize.value,list_pageNum.value)
    recommendList.value = res.content
  }else if(topItem.name === '新锐榜'){
    const res = await reqNewList(list_pageSize.value,list_pageNum.value)
    recommendList.value = res.content
  }else if(topItem.name === '最新'){
    const res = await reqNewList(list_pageSize.value,list_pageNum.value+1)
    recommendList.value = res.content
  }
}
//点击打开选择我的兴趣弹框
const selectHobby = ()=>{
  console.log('被点击了喔')
  outerVisible.value = true
}
//点击关闭我的兴趣弹框
const closeDialog = ()=>{
  outerVisible.value = false
  if(selectedTags.value.length===0)return
  inputVal.value = ''
  pageNum.value = 1
  pageSize.value = 20
  getRecommendList()
}
//获取推荐列表资源
const getRecommendList = async ()=>{
  const res = await reqRecommend(pageSize.value,pageNum.value)
  recommendList.value = res.content
}
//获取我的兴趣列表标签
const myHobbyList = async ()=>{
  const res = await reqMyHobby(hobby_pageSize.value,hobby_pageNum.value)
  res.content.forEach((item:any) => item.isChecked=false)
  hobbyList.value = [...hobbyList.value,...res.content]
}
//点击关闭tag标签
const closeTag = (item:hobbyItem)=>{
  item.isChecked = false
}
//点击tag标签切换颜色
const toggleColor = (item:hobbyItem)=>{
  if(selectedLen.value===7 && !item.isChecked)return ElMessage.error('选这么多你跳的完吗=_=')
  item.isChecked = !item.isChecked
}
//滚动加载
const load = () => {
  if(totalTagNum.value>=122)return ElMessage.info('我是有底线的~_~')
  hobby_pageNum.value += 1
  //限制全局loading
  isEleLoading.value = true
  myHobbyList()
}
//计算已选中的tag标签
const selectedTags = computed(()=>{
  const len = hobbyList.value.filter(item=>item.isChecked).length
  selectedLen.value = len
  return hobbyList.value.filter(item=>item.isChecked);
})
//计算所有标签的数量
const totalTagNum = computed(()=>hobbyList.value.length)
//搜索关键字
const searchKeys = async ()=>{
  if(inputVal.value.trim()==='')return
  const res = await reqSearchByName(inputVal.value)
  searchByNameRes.value = res.content
  outerVisible.value = false
  searchDialogVisible.value = true
  sourceInfo.setSearchHistory(inputVal.value)
}
//返回
const back = ()=>{
  outerVisible.value = true
  searchDialogVisible.value = false
}
//清空搜索历史
const clearHis = ()=>{
  searchHistory.value = []
  localStorage.removeItem('searchHistory')
}
//点击搜索历史的tag标签跳转到首页添加兴趣
const addHobby = (name:string)=>{
  hobbyList.value.forEach(item=>{
    if(item.name===name){
      if(selectedLen.value<7){
        item.isChecked = true
        ElMessage.success('选择成功~')
      }else {
        ElMessage.error('最多选择七个标签嗷')
      }
    }
  })
  inputVal.value = ''
  back()
}
//搜索关键字节流操作
const throttleSearch = debounce(searchKeys,2000)
// 点击加载更多
const uploadRecommendList = async ()=>{
  fullscreenLoading.value = true
  // 点击后页面出现加载样式
  setTimeout(() => {
    pageSize.value += 10
    list_pageSize.value += 10
    // 重新请求数据
    getRecommendList()
    fullscreenLoading.value = false
    // 去掉按钮
    isLoading.value = false
  }, 500)
}
const isEnough = ref<number>(0)
const isAddEnough = ref<number>(0)
window.onscroll = function(){
  let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
  if(scrollTop+windowHeight>=scrollHeight){
    if(isEnough.value!==1){
      pageSize.value += 10
      getRecommendList()
      isEnough.value += 1
    }
    if(isAddEnough.value!==1){
      list_pageSize.value += 10
      getRecommendList()
      isAddEnough.value += 1
    }
  }
}

</script>

<style scoped lang="scss">
@import "@/assets/scss/home.scss";
</style>
<style>
@import'@/assets/css/home_index.css';
</style>
